<template>
	<view style="background-color: #F5F5F5;height: 850px;">
		<view style="padding-top: 30px;">
			<image src="../../static/icon/d8e4a9c7370203390ffe6fb19e1ea36.jpg" mode="aspectFit"  style="margin-left: 50px;"></image>
		</view>
		<view class="view-passWord">
			<text class="password">密码登录</text>
		</view>
		<view class="uni-form-item uni-column">
			<u--form labelPosition="left" ref='myForm' :model="login">
				<u-form-item label="" prop="userName" borderBottom  style="width: 350px;margin-left:30px;margin-top:20px">
					<u--input v-model="login.userName" border="none" placeholder="请输入您的账号">
					</u--input>
				</u-form-item>
				<u-form-item label="" prop="password" borderBottom  style="width: 350px;margin-left:30px;margin-top:20px">
					<u--input password v-model="login.password" border="none" placeholder="请输入您的密码">
					</u--input>
				</u-form-item>
			</u--form>
		</view>
		<view>
			<button type="default" class="login-button" @click="AccountLogin">注册/登录</button>
		</view>
		<view>
			<button type="default" class="login-button" @click="PhoneLogin">手机号登录</button>
		</view>
	</view>
</template>

<script>
	import {mapGetters,mapActions,mapMutations} from 'vuex';
	import WebSocket from '@/common/websocket.js';
	export default {
		data() {
			return {
				login:{
					// 登录用户名
					userName:'',
					// 登录密码
					password:'',
				},
				// 自定义校验规则
				rules: {
					userName: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
					],
				},
				// 头部获取用户id
				id:'',
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		methods: {
			 ...mapActions(['setUserInfo','setAndStoreToken']),
			// 注册按钮
			PhoneLogin () {
				uni.navigateTo({
					url: '/pages/login/phone-login'
				})
			},
			// 登录按钮
			AccountLogin () {
				this.$myRequest({
					url: '/eat-service/login/loginByUser',
					data: {
						userName: this.login.userName,
						password: this.login.password
					}
				}).then(res => {
					if(res.data.flag){
						// token
						uni.setStorageSync('token',res.data.obj.token)
						// 登录账号
						uni.setStorageSync('userName',res.data.obj.user.userName)
						// 用户昵称
						uni.setStorageSync('nickName',res.data.obj.user.nickName)
						// 用户性别
						uni.setStorageSync('sex',res.data.obj.user.sex)
						// 用户年龄
						uni.setStorageSync('age',res.data.obj.user.age)
						// 用户电话
						uni.setStorageSync('phone',res.data.obj.user.phone)
						// 用户邮箱
						uni.setStorageSync('mail',res.data.obj.user.mail)
						// 用户生日
						uni.setStorageSync('birthday',res.data.obj.user.birthday)
						// 用户头像id
						uni.setStorageSync('avatarId',res.data.obj.user.avatarId)
						// 用户角色
						uni.setStorageSync('role',res.data.obj.user.role)
						// 用户id
						uni.setStorageSync('id',res.data.obj.user.id)
						
						uni.showToast({
							title: '登录成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
						// 登录成功跳转页面
						uni.switchTab({
							url: '/pages/home/home'
						})
						window.location.reload();
					} else {
						uni.showToast({
							title: '登录失败',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			},
			// 创建websocket会话
			createWebsocket(){
				this.id = uni.getStorageSync('id')
				var url = 'ws://' + '127.0.0.1:15000/eat-service/dchat/' + this.id;
				url = url +'/H5'
				uni.connectSocket({
					// 建立websocket会话
						url:url,
						// 成功建立会话时
						success: res=>{
							console.log("websocket建立成功")
						},
						fail(res){
							console.log(res)
						}
				})
				//监听socket打开
				uni.onSocketOpen(()=>{
				    console.log('WebSocket连接已打开！');
				})
				
				//监听socket关闭
				uni.onSocketClose(()=>{
				    console.log('WebSocket连接已关闭！');
				})
			}
		}
	}
</script>

<style scoped>
	.login-button{
		margin-top: 30px;
		width: 350px;
	}
	.view-passWord{
		margin-top: 60px;
		margin-left: 30px;
	}
	.password{
		font-size: 20px;
	}
	.uni-input{
		width: 350px;
		margin: 0 auto;
		margin-top: 50px;
		border-bottom: 1px solid #d1d1d1;
	}
</style>
